import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { Input } from './ui/input';
import { Mic, Clock, Trophy, Star, Type, Hash, CheckCircle } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { TestResult } from '../types';

interface VerbalFluencyTestProps {
  onComplete: (result: TestResult) => void;
}

interface FluentTask {
  id: number;
  type: 'semantic' | 'phonemic';
  category: string;
  description: string;
  duration: number; // 秒
}

const SEMANTIC_TASKS: FluentTask[] = [
  {
    id: 1,
    type: 'semantic',
    category: '动物',
    description: '说出尽可能多的动物名称',
    duration: 60
  },
  {
    id: 2,
    type: 'semantic',
    category: '水果',
    description: '说出尽可能多的水果名称',
    duration: 60
  },
  {
    id: 3,
    type: 'semantic',
    category: '职业',
    description: '说出尽可能多的职业名称',
    duration: 60
  }
];

const PHONEMIC_TASKS: FluentTask[] = [
  {
    id: 4,
    type: 'phonemic',
    category: '字母"S"',
    description: '说出尽可能多以"S"开头的词语',
    duration: 60
  },
  {
    id: 5,
    type: 'phonemic',
    category: '字母"F"',
    description: '说出尽可能多以"F"开头的词语',
    duration: 60
  },
  {
    id: 6,
    type: 'phonemic',
    category: '字母"L"',
    description: '说出尽可能多以"L"开头的词语',
    duration: 60
  }
];

const ALL_TASKS = [...SEMANTIC_TASKS, ...PHONEMIC_TASKS];

export function VerbalFluencyTest({ onComplete }: VerbalFluencyTestProps) {
  const [stage, setStage] = useState<'instructions' | 'test' | 'results'>('instructions');
  const [currentTask, setCurrentTask] = useState(0);
  const [currentInput, setCurrentInput] = useState('');
  const [wordsEntered, setWordsEntered] = useState<string[][]>([]);
  const [taskWords, setTaskWords] = useState<string[]>([]);
  const [taskTimeLeft, setTaskTimeLeft] = useState(60);
  const [startTime, setStartTime] = useState<number>(0);
  const [taskStartTime, setTaskStartTime] = useState<number>(0);
  const [totalScore, setTotalScore] = useState(0);
  const [feedbackMessage, setFeedbackMessage] = useState('');
  const [showFeedback, setShowFeedback] = useState(false);

  const inputRef = useRef<HTMLInputElement>(null);
  const task = ALL_TASKS[currentTask];

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (stage === 'test') {
      interval = setInterval(() => {
        setTaskTimeLeft(prev => {
          if (prev <= 1) {
            handleTaskComplete();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [stage, currentTask]);

  useEffect(() => {
    if (stage === 'test' && inputRef.current) {
      inputRef.current.focus();
    }
  }, [stage, currentTask]);

  const handleStartTest = () => {
    setStage('test');
    setStartTime(Date.now());
    setTaskStartTime(Date.now());
  };

  const handleWordSubmit = () => {
    const word = currentInput.trim().toLowerCase();
    if (!word) return;

    // 检查是否重复
    if (taskWords.includes(word)) {
      setFeedbackMessage(`"${word}" 已输入过，请输入其他词汇`);
      setShowFeedback(true);
      setTimeout(() => setShowFeedback(false), 2000);
      setCurrentInput('');
      return;
    }

    // 验证词汇有效性
    let validationResult = { isValid: false, score: 0, feedback: '' };
    if (task.type === 'semantic') {
      validationResult = validateSemanticWord(word, task.category);
    } else {
      validationResult = validatePhonemicWord(word, task.category);
    }

    if (validationResult.isValid) {
      const newTaskWords = [...taskWords, word];
      setTaskWords(newTaskWords);
      setTotalScore(prev => prev + validationResult.score);
      
      setFeedbackMessage(`✅ "${word}" +${validationResult.score}分`);
      setShowFeedback(true);
      setTimeout(() => setShowFeedback(false), 1500);
    } else {
      setFeedbackMessage(validationResult.feedback);
      setShowFeedback(true);
      setTimeout(() => setShowFeedback(false), 2000);
    }

    setCurrentInput('');
  };

  const validateSemanticWord = (word: string, category: string): { isValid: boolean; score: number; feedback: string } => {
    // 扩展的词汇数据库
    const categoryWords = {
      '动物': {
        common: ['猫', '狗', '鸟', '鱼', '马', '牛', '羊', '猪', '鸡', '鸭', '兔子', '老鼠', '青蛙', '蝴蝶', '蜜蜂', '蚂蚁', '虫子', '蛇', '龟', '鹤'],
        uncommon: ['老虎', '狮子', '大象', '熊', '狼', '鹿', '松鼠', '猴子', '熊猫', '企鹅', '海豚', '鲸鱼', '章鱼', '鲨鱼', '螃蟹', '海星', '水母', '孔雀', '鸵鸟', '袋鼠']
      },
      '水果': {
        common: ['苹果', '香蕉', '橙子', '葡萄', '梨', '桃子', '樱桃', '草莓', '西瓜', '芒果', '柠檬', '橘子', '桔子', '李子', '杏子', '椰子', '柚子'],
        uncommon: ['菠萝', '猕猴桃', '火龙果', '榴莲', '荔枝', '龙眼', '山竹', '红毛丹', '莲雾', '释迦', '番石榴', '百香果', '蓝莓', '黑莓', '覆盆子', '石榴', '无花果']
      },
      '职业': {
        common: ['医生', '教师', '护士', '司机', '厨师', '警察', '工人', '农民', '学生', '军人', '老师', '保安', '清洁工', '销售员', '会计', '银行员'],
        uncommon: ['工程师', '律师', '建筑师', '设计师', '程序员', '记者', '演员', '歌手', '画家', '作家', '科学家', '研究员', '翻译', '导演', '摄影师', '心理医生']
      }
    };
    
    const words = categoryWords[category as keyof typeof categoryWords];
    if (!words) {
      return { isValid: false, score: 0, feedback: `❌ 未知类别：${category}` };
    }
    
    if (word.length < 2) {
      return { isValid: false, score: 0, feedback: `❌ "${word}" 词汇过短，至少需要2个字符` };
    }
    
    // 检查是否为该类别的词汇
    if (words.common.includes(word)) {
      return { isValid: true, score: 1, feedback: `✅ "${word}" 常见词汇 +1分` };
    } else if (words.uncommon.includes(word)) {
      return { isValid: true, score: 2, feedback: `✅ "${word}" 较难词汇 +2分` };
    }
    
    // 语义相关性检查（简化版本）
    const semanticKeywords = {
      '动物': ['物', '兽', '鸟', '鱼', '虫', '蛇', '龟', '鹤', '鸡', '鸭', '猪', '牛', '羊', '马'],
      '水果': ['果', '子', '梅', '桃', '李', '杏', '柿', '瓜', '莓', '椰', '橙', '柠', '橘'],
      '职业': ['师', '员', '工', '家', '手', '人', '者', '长', '官', '士']
    };
    
    const keywords = semanticKeywords[category as keyof typeof semanticKeywords] || [];
    const hasSemanticMatch = keywords.some(keyword => word.includes(keyword));
    
    if (hasSemanticMatch && word.length >= 2) {
      return { isValid: true, score: 1, feedback: `✅ "${word}" 相关词汇 +1分` };
    }
    
    return { isValid: false, score: 0, feedback: `❌ "${word}" 不属于${category}类别` };
  };

  const validatePhonemicWord = (word: string, category: string): { isValid: boolean; score: number; feedback: string } => {
    const letter = category.match(/"([A-Z])"/)?.[1]?.toLowerCase();
    
    if (!letter) {
      return { isValid: false, score: 0, feedback: `❌ 无法识别字母要求` };
    }
    
    if (word.length < 2) {
      return { isValid: false, score: 0, feedback: `❌ "${word}" 词汇过短，至少需要2个字符` };
    }
    
    if (!word.startsWith(letter)) {
      return { isValid: false, score: 0, feedback: `❌ "${word}" 不是以"${letter.toUpperCase()}"开头` };
    }
    
    // 根据词汇长度和复杂度评分
    let score = 1; // 基础分
    let scoreReason = '基础词汇';
    
    if (word.length >= 4) {
      score = 2;
      scoreReason = '较长词汇';
    }
    
    if (word.length >= 6) {
      score = 3;
      scoreReason = '复杂词汇';
    }
    
    // 检查是否包含复杂结构（复合词、专业词汇等）
    if (word.includes('的') || word.includes('化') || word.includes('性') || word.includes('者') || word.includes('员')) {
      score += 1;
      scoreReason = '复合/专业词汇';
    }
    
    return { isValid: true, score, feedback: `✅ "${word}" ${scoreReason} +${score}分` };
  };

  const handleTaskComplete = () => {
    const newWordsEntered = [...wordsEntered];
    newWordsEntered[currentTask] = [...taskWords];
    setWordsEntered(newWordsEntered);

    if (currentTask < ALL_TASKS.length - 1) {
      // 下一个任务
      setCurrentTask(prev => prev + 1);
      setTaskWords([]);
      setTaskTimeLeft(60);
      setTaskStartTime(Date.now());
    } else {
      // 测试结束
      setStage('results');
    }
  };

  const handleComplete = () => {
    const semanticWords = wordsEntered.slice(0, 3).flat();
    const phonemicWords = wordsEntered.slice(3).flat();
    
    const semanticCount = semanticWords.length;
    const phonemicCount = phonemicWords.length;
    
    const averageWordsPerTask = Math.round(totalScore / ALL_TASKS.length);
    
    // 修正的评分系统：基于totalScore（质量分数）而不是数量
    const maxPossibleScore = ALL_TASKS.length * 30; // 假设每个任务最高30分
    const finalScore = Math.min(100, Math.round((totalScore / maxPossibleScore) * 100));

    const timeUsed = Math.round((Date.now() - startTime) / 1000);

    // 计算各任务表现
    const taskPerformance = wordsEntered.map((words, index) => ({
      task: ALL_TASKS[index].category,
      wordCount: words.length,
      type: ALL_TASKS[index].type
    }));

    const result: TestResult = {
      id: Date.now().toString(),
      testType: 'verbal-fluency',
      score: finalScore,
      completedAt: new Date(),
      duration: timeUsed,
      details: {
        totalWords: semanticCount + phonemicCount,
        totalQualityScore: totalScore,
        semanticWords: semanticCount,
        phonemicWords: phonemicCount,
        averageWordsPerTask: Math.round((semanticCount + phonemicCount) / ALL_TASKS.length * 10) / 10,
        taskPerformance,
        semanticFluency: Math.round((semanticCount / 3) * 10) / 10,
        phonemicFluency: Math.round((phonemicCount / 3) * 10) / 10,
        fluencyIndex: Math.round((totalScore / ALL_TASKS.length) * 10) / 10
      }
    };

    onComplete(result);
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleWordSubmit();
    }
  };

  if (stage === 'instructions') {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-lg">
          <CardHeader className="text-center pb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-pink-700 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
              <Mic className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-2xl text-slate-800">语言流利性测试</CardTitle>
            <p className="text-slate-600 mt-2">测试您的词汇检索和语言产出速度</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl p-6 border border-pink-100">
              <h3 className="font-semibold text-pink-900 mb-4 flex items-center gap-2">
                <Star className="w-5 h-5" />
                测试说明
              </h3>
              <div className="space-y-3 text-slate-700">
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">1</span>
                  <p>您将进行6个词汇流利性任务</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">2</span>
                  <p><strong>语义流利性</strong>：根据类别说出词语（如：动物、水果）</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">3</span>
                  <p><strong>语音流利性</strong>：根据首字母说出词语（如：以S开头）</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">4</span>
                  <p>每个任务60秒，尽可能快速准确地输入词语</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">5</span>
                  <p><strong>重要：</strong>只有符合类别/字母要求的词汇才能得分</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-pink-700 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">6</span>
                  <p>词汇质量和复杂度会影响得分，不能重复输入</p>
                </div>
              </div>
            </div>

            {/* 任务预览 */}
            <div className="grid md:grid-cols-2 gap-4">
              <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 border border-blue-200">
                <div className="flex items-center gap-2 mb-3">
                  <Type className="w-5 h-5 text-blue-600" />
                  <h4 className="font-semibold text-blue-800">语义流利性</h4>
                </div>
                <div className="space-y-1 text-sm text-blue-700">
                  <div>• 动物名称</div>
                  <div>• 水果名称</div>
                  <div>• 职业名称</div>
                </div>
              </div>
              <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 border border-purple-200">
                <div className="flex items-center gap-2 mb-3">
                  <Hash className="w-5 h-5 text-purple-600" />
                  <h4 className="font-semibold text-purple-800">语音流利性</h4>
                </div>
                <div className="space-y-1 text-sm text-purple-700">
                  <div>• S开头词语</div>
                  <div>• F开头词语</div>
                  <div>• L开头词语</div>
                </div>
              </div>
            </div>

            <div className="grid md:grid-cols-3 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl border border-pink-200">
                <div className="text-2xl font-bold text-pink-700 mb-1">6</div>
                <div className="text-sm text-pink-700">任务</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl border border-rose-200">
                <div className="text-2xl font-bold text-rose-700 mb-1">60</div>
                <div className="text-sm text-rose-700">秒/任务</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl border border-pink-200">
                <div className="text-2xl font-bold text-slate-600 mb-1">6</div>
                <div className="text-sm text-slate-700">分钟总时</div>
              </div>
            </div>

            <Button 
              onClick={handleStartTest}
              className="w-full bg-gradient-to-r from-pink-700 to-rose-600 hover:from-pink-800 hover:to-rose-700 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              开始测试
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  if (stage === 'test') {
    const progress = (currentTask / ALL_TASKS.length) * 100;

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-4xl mx-auto space-y-6"
      >
        {/* 顶部状态栏 */}
        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="flex items-center gap-4">
            <Badge variant="outline" className="bg-pink-100 text-pink-700 border-pink-300">
              任务 {currentTask + 1} / {ALL_TASKS.length}
            </Badge>
            <Badge variant="outline" className={`${
              task.type === 'semantic' ? 'bg-blue-100 text-blue-700 border-blue-300' :
              'bg-purple-100 text-purple-700 border-purple-300'
            }`}>
              {task.type === 'semantic' ? '语义流利性' : '语音流利性'}
            </Badge>
            <div className="flex items-center gap-2 text-slate-600">
              <Trophy className="w-4 h-4" />
              <span className="font-semibold">{taskWords.length} 个词</span>
            </div>
          </div>
          
          <div className="flex items-center gap-4">
            <div className="text-center">
              <div className={`text-2xl font-bold font-mono ${taskTimeLeft <= 10 ? 'text-red-500' : 'text-slate-700'}`}>
                {taskTimeLeft}
              </div>
              <div className="text-xs text-slate-500">任务剩余</div>
            </div>
            <div className="text-center">
              <div className="text-lg font-mono text-slate-600">
                {totalScore}
              </div>
              <div className="text-xs text-slate-500">质量得分</div>
            </div>
          </div>
        </div>

        <Progress value={progress} className="h-2" />

        {/* 任务描述 */}
        <Card className={`bg-gradient-to-r ${
          task.type === 'semantic' ? 'from-blue-50 to-blue-100 border-blue-200' :
          'from-purple-50 to-purple-100 border-purple-200'
        }`}>
          <CardContent className="py-4">
            <div className="text-center">
              <h3 className={`text-xl font-semibold ${
                task.type === 'semantic' ? 'text-blue-800' : 'text-purple-800'
              }`}>
                {task.category}
              </h3>
              <p className={`text-sm mt-1 ${
                task.type === 'semantic' ? 'text-blue-700' : 'text-purple-700'
              }`}>
                {task.description}
              </p>
            </div>
          </CardContent>
        </Card>

        {/* 输入区域 */}
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-lg">
          <CardContent className="py-8">
            <div className="max-w-md mx-auto space-y-6">
              <div className="flex gap-3">
                <Input
                  ref={inputRef}
                  value={currentInput}
                  onChange={(e) => setCurrentInput(e.target.value)}
                  onKeyDown={handleKeyDown}
                  placeholder="输入词语..."
                  className="text-lg px-4 py-3 border-pink-300 focus:border-pink-500"
                />
                <Button
                  onClick={handleWordSubmit}
                  disabled={!currentInput.trim()}
                  className="bg-gradient-to-r from-pink-700 to-rose-600 hover:from-pink-800 hover:to-rose-700 px-6"
                >
                  确认
                </Button>
              </div>

              <div className="text-center text-sm text-slate-500">
                按回车键快速确认 • 只有符合要求的词汇才能得分
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 实时反馈 */}
        <AnimatePresence>
          {showFeedback && (
            <motion.div
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              className="fixed top-20 left-1/2 transform -translate-x-1/2 z-50"
            >
              <Card className={`text-white border-0 shadow-lg ${
                feedbackMessage.includes('❌') ? 'bg-red-500' :
                feedbackMessage.includes('已输入过') ? 'bg-orange-500' :
                'bg-green-500'
              }`}>
                <CardContent className="py-2 px-4">
                  <div className="flex items-center gap-2">
                    <CheckCircle className="w-4 h-4" />
                    <span className="font-semibold">{feedbackMessage}</span>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          )}
        </AnimatePresence>

        {/* 已输入词汇 */}
        {taskWords.length > 0 && (
          <Card className="bg-white/90 backdrop-blur-sm border-slate-200 shadow-lg">
            <CardHeader>
              <CardTitle className="text-lg">已输入词汇 ({taskWords.length})</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                <AnimatePresence>
                  {taskWords.map((word, index) => (
                    <motion.div
                      key={word}
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      className="bg-gradient-to-r from-pink-100 to-rose-100 border border-pink-200 rounded-lg px-3 py-1 text-sm"
                    >
                      <span className="text-slate-700">{word}</span>
                      <span className="text-pink-600 ml-2 font-semibold">#{index + 1}</span>
                    </motion.div>
                  ))}
                </AnimatePresence>
              </div>
            </CardContent>
          </Card>
        )}
      </motion.div>
    );
  }

  if (stage === 'results') {
    const semanticWords = wordsEntered.slice(0, 3).flat();
    const phonemicWords = wordsEntered.slice(3).flat();
    
    const semanticCount = semanticWords.length;
    const phonemicCount = phonemicWords.length;
    const totalWords = semanticCount + phonemicCount;
    
    const maxPossibleScore = ALL_TASKS.length * 30;
    const finalScore = Math.min(100, Math.round((totalScore / maxPossibleScore) * 100));

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-pink-200 shadow-xl">
          <CardHeader className="text-center pb-6">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
              className="w-20 h-20 bg-gradient-to-br from-pink-700 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg"
            >
              <Trophy className="w-10 h-10 text-white" />
            </motion.div>
            
            <CardTitle className="text-3xl text-slate-800 mb-2">测试完成！</CardTitle>
            <div className="text-6xl font-bold bg-gradient-to-r from-pink-700 to-rose-600 bg-clip-text text-transparent">
              {finalScore}
            </div>
            <p className="text-slate-600">语言流利性得分</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl border border-pink-200">
                <div className="text-2xl font-bold text-pink-700 mb-1">{totalWords}</div>
                <div className="text-sm text-pink-700">总词汇数</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-rose-50 to-rose-100 rounded-xl border border-rose-200">
                <div className="text-2xl font-bold text-rose-700 mb-1">{totalScore}</div>
                <div className="text-sm text-rose-700">质量得分</div>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border border-blue-200">
                <div className="text-2xl font-bold text-blue-700 mb-1">{semanticCount}</div>
                <div className="text-sm text-blue-700">语义流利性</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl border border-purple-200">
                <div className="text-2xl font-bold text-purple-700 mb-1">{phonemicCount}</div>
                <div className="text-sm text-purple-700">语音流利性</div>
              </div>
            </div>

            <div className="space-y-3">
              {wordsEntered.map((words, index) => (
                <div key={index} className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                  <span className="text-slate-600">{ALL_TASKS[index].category}</span>
                  <span className="font-semibold text-slate-800">{words.length} 词</span>
                </div>
              ))}
            </div>

            <Button 
              onClick={handleComplete}
              className="w-full bg-gradient-to-r from-pink-700 to-rose-600 hover:from-pink-800 hover:to-rose-700 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              查看详细结果
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  return null;
}